<template>
  <div class="container">
    <headComponent></headComponent>
    <div class="row" style="margin-top: 30px">
      <div class="col-xs-10 ">
        <div class="input-group pull-right" style="width: 200px">
          <input v-model="sign" type="text" class="form-control" style="height: 30px;" placeholder="请输入关键字" >
          <span class="input-group-btn">
						<button v-on:click="search" class="btn btn-default btn-info btn-lg" type="submit" style="height: 30px;width: 40px;background-color: #F45809" @click="queryByName">
							<span class="glyphicon glyphicon-search" style="font-size: 15px;font-color:#FFFFFF"></span>
						</button>
					</span>
        </div>
      </div>
      <div class="col-xs-2">
        <div style="padding-left: 20px;font-size: 15px">
          <select style=" height: 30px;width: 90px;"  v-on:change="selectType">
            <option value="证件">证件</option>
            <option value="眼镜">眼镜</option>
            <option value="钥匙">钥匙</option>
            <option value="贵重物品">贵重物品</option>
            <option value="其他">其他</option>
          </select>
        </div>
      </div>
    </div>

    <div style="height: 880px;width: 1108px;border: 1px #E4E4E4 solid;margin-top: 20px">
      <div class="row" style="margin-top: 10px">
        <div class="col-xs-8 text-right" style="font-size: 13px;padding-top: 5px">
          <span class="glyphicon glyphicon-sort-by-attributes">&nbsp;时间升序</span>
        </div>
        <div class="col-xs-1 text-left" style="font-size: 13px;width: 110px;padding-top: 5px">
          <span class="glyphicon glyphicon-sort-by-attributes-alt">&nbsp;时间降序</span>
        </div>
        <div class="col-xs-2 text-center">
          <router-link to="/lostManagementFunctionPage">
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" style="background-color: #286090">
              <span class="glyphicon glyphicon-plus-sign" style="font-size: 13px;">&nbsp;发布</span>
            </button>
          </router-link>
          <router-view></router-view>
        </div>

      </div>

      <div style="border: 1px #E4E4E4 solid;margin-top: 5px"></div>

      <div class="row" style="margin-left: 5px">
        <div class="col-xs-3" style="margin-top: 15px;" v-for="item in info">
          <div style="height: 390px;width: 238px;border: 3px #EEEEEE solid">
            <img src="src/assets/wkl.jpg" alt="" style="height: 240px;width: 232px">

            <div class="row" style="margin-top: 10px">
              <div class="col-xs-5 text-center" style="padding-right: 0px">
                <div style="font-size: 15px;font-weight: bold">物品名称:</div>
              </div>
              <div class="col-xs-7" style="padding-left: 0px">
                <div style="font-size: 15px;">{{item.lostPropertyName}}</div>
              </div>
            </div>

            <div class="row" style="margin-top: 10px">
              <div class="col-xs-5 text-center" style="padding-right: 0px">
                <div style="font-size: 14px;font-weight: bold">拾取日期:</div>
              </div>
              <div class="col-xs-7" style="padding-left: 0px">
                <div style="font-size: 14px;">{{item.time}}</div>
              </div>
            </div>

            <div class="row" style="margin-top: 10px">
              <div class="col-xs-5 text-center" style="padding-right: 0px">
                <div style="font-size: 15px;font-weight: bold">物品状态:</div>
              </div>
              <div class="col-xs-7" style="padding-left: 0px">
                <div style="font-size: 15px;">{{item.state}}</div>
              </div>
            </div>

            <div class="row" style="margin-top: 10px;margin-bottom: 30px">
              <div class="col-xs-5 text-center">
                <button type="button" class="btn btn-primary" style="background-color: #286090" v-on:click="del(item.id)">
                  <span class="glyphicon glyphicon-trash" style="font-size: 15px;margin-top: 5px"></span>
                </button>
              </div>

              <div class="col-xs-7 text-center">
                <button type="button" class="btn btn-default">
                <span v-on:click="cli(item)">更多详情</span></button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xs-3">

        </div>
        <div class="col-xs-3">

        </div>
        <div class="col-xs-3">

        </div>
      </div>
    </div>


    <div class="row">
      <div class="col-xs-12" style="margin-top: 30px">
        <div class="pull-right">
          <ul class="pagination">
            <li><a  href="#" v-on:click="UpPage">上一页</a></li>
            <li><a  href="#"v-on:click="firstFoundPage">首页</a></li>
            <li><a  href="#" v-on:click="lastFoundPage">尾页</a></li>
            <li><a  href="#" v-on:click="DownPage">下一页</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "foundManagementPage",
      data(){
          return{
            foundManagementKeyWord:'',
            info:[],
            currentPage:1,
            numPage:0,
            sign:''
          }
    },
      methods:{
        selectType(event){
          console.log(event.target.value);
          var self=this
          axios.get(this.rootUrl+"/info/QueryByDivide",{params:{divide:event.target.value,type:'招领启事'}}).then(function (response) {
            //   console.log(response.data)
            self.info = response.data
          })
        },
        queryByName(){
          var self=this
          axios.get(this.rootUrl+"/info/QueryByName",{params:{sign:this.sign,type:'招领启事'}}).then(function (response){
            console.log(response.data)
            self.info = response.data
          })
        },
          cli(item){
            this.$router.push({name:'foundGoodsDetailsPage',params:{item:item}})
          },
        search:function () {
          if (this.foundManagementKeyWord==''){
            alert('请输入关键字');
            return;
          }
        },
        UpPage(){
          if (this.currentPage>1){
            this.currentPage--
            var self=this
            axios.get(this.rootUrl+"/info/foundInfo",{params:{
                currentPage:this.currentPage
              }})
              .then(function (resp) {
                self.info=resp.data
              })
          }else {
            alert("已经是首页了")
          }
        },
        firstFoundPage(){
          this.currentPage=1;
          var  self=this
          axios.get(this.rootUrl+"/info/foundInfo",{params:{
              currentPage:this.currentPage
            }})
            .then(function (resp) {
              self.info=resp.data
            })
          // alert("到达首页")
        },
        lastFoundPage(){
          this.currentPage=this.numPage
          var self=this
          axios.get(this.rootUrl+"/info/foundInfo",{params:{
              currentPage:this.currentPage
            }})
            .then(function (resp) {
              self.info=resp.data
            })
          // alert("到达尾页")
        },
        DownPage(){
          if (this.currentPage<this.numPage){
            this.currentPage++
            var self=this
            axios.get(this.rootUrl+"/info/foundInfo",{params:{
                currentPage:this.currentPage
              }})
              .then(function (resp) {
                self.info=resp.data
              })
          }else {
            alert("已经是尾页了")
          }
        },
        del(proId){
          var self=this
          axios.get(this.rootUrl+"/info/deletePropertyById",{params:{
              id:proId
            }})
            .then(function (resp) {
            })
        }
      },
      created() {
        var self=this
        axios.get(this.rootUrl+"/info/foundInfo",{params:{
            currentPage:this.currentPage
          }})
          .then(function (resp) {
            console.log(resp.data)
            self.info=resp.data
          }),
          axios.get(this.rootUrl+"info/infoSize",{
            params:{type:"招领启事"}
          })
            .then(function (resp) {
              // console.log(resp.data)
              self.numPage=Math.ceil(resp.data/8)
              // alert(self.numPage)
            })
      },
    }
</script>

<style scoped>
  #chang:hover{
    background-color: #EEEEEE;
  }
</style>
